<template>
  <view class="page ui-form-basic">
    <fui-form ref="formRef" :model="form" class="form-wrapper" labelWidth="200" labelSize="28" labelWeight="bold">
      <fui-form-item label="原联系方式" prop="oldMobile" left="0" marginTop="14" :padding="['16rpx', 0]">
        <fui-text :text="maskPhoneNumber(form.oldMobile)" size="28"></fui-text>
        <!-- <fui-input :borderBottom="false" :padding="[0]" placeholder="请输入原联系方式" v-model="form.oldMobile" size="28" disabled></fui-input> -->
      </fui-form-item>
      <fui-form-item label="新联系方式" prop="newMobile" left="0" marginTop="14" :padding="['16rpx', 0]">
        <fui-input :borderBottom="false" :padding="[0]" placeholder="请输入新联系方式" v-model="form.newMobile" size="28"></fui-input>
      </fui-form-item>
      <fui-form-item label="验证码" prop="code" left="0" marginTop="14" :padding="['16rpx', 0]">
        <fui-input :borderBottom="false" :padding="[0]" placeholder="请输入验证码" v-model="form.code" size="28"></fui-input>
        <template v-slot:right>
          <fui-countdown-verify ref="sendCodeRef" width="auto" borderColor="#fff" color="var(--fui-color-link)" @send="onSendCode"></fui-countdown-verify>
        </template>
      </fui-form-item>
    </fui-form>
    <view class="btn-wrapper">
      <fui-button class="ui-btn-primary_plain" text="取消" height="78rpx" radius="8rpx" :margin="['0', '54rpx', '0', '0']" @click="cancel"></fui-button>
      <fui-button text="更新" height="78rpx" radius="8rpx" :margin="['0']" :loading="isLoading" @click="submit"></fui-button>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed, inject } from 'vue'
import { useStore } from 'vuex'
import userApi from '@/api/user'
import { maskPhoneNumber } from '@/utils/tools'

const store = useStore()
const modal = inject('$modal')
const tab = inject('$tab')

const formRef = ref(null)
const form = reactive({
  oldMobile: store.getters.userInfo.mobile,
  newMobile: '',
  code: ''
})

const msgCodeRules = [
  {
    name: 'newMobile',
    rule: ['required', 'isMobile'],
    msg: ['请输入新联系方式', '请输入正确的手机号']
  }
]
const rules = [
  {
    name: 'newMobile',
    rule: ['required', 'isMobile'],
    msg: ['请输入新联系方式', '请输入正确的手机号']
  },
  {
    name: 'code',
    rule: ['required', 'minLength:4', 'maxLength:6'],
    msg: ['请输入验证码', '手机验证码长度为4-6位，请重新输入', '手机验证码长度为4-6位，请重新输入']
  }
]

// 发送验证码
const sendCodeRef = ref(null)
const onSendCode = async () => {
  const validRes = await formRef.value.validator(form, msgCodeRules)
  if (!validRes.isPassed) {
    sendCodeRef.value && sendCodeRef.value.reset()
    return
  }
  store.dispatch('SendMsgCode', form.newMobile).then(() => {
    sendCodeRef.value && sendCodeRef.value.success()
  }).catch(err => {
    sendCodeRef.value && sendCodeRef.value.reset()
    modal.msgError(err.msg)
  })
}

// 更换电话提交
const phoneApiUrl = computed(() => {
  return store.getters.userType === '1' ? 'updateSupplyPhone' : 'updateSupplierPhone'
})
const isLoading = ref(false)
const submit = async () => {
  const validRes = await formRef.value.validator(form, rules)
  if (validRes.isPassed) {
    isLoading.value = true
    const params = { ...form }
    if (store.getters.userType === '1') params.id = store.getters.userId
    userApi[phoneApiUrl.value](params).then((res) => {
      isLoading.value = false
      modal.msg('电话更换成功，请重新登录！')
      setTimeout(() => {
        store.dispatch('LogOut')
      }, 1000)
    }).catch(err => {
      isLoading.value = false
      if (err.msg) {
        modal.msgError(err.msg)
      } else {
        modal.msgError('更换电话失败！')
      }
    })
  }
}

const cancel = () => {
  tab.navigateBack()
}
</script>

<style lang="scss" scoped>
@import "@/static/scss/form.scss";
</style>
